import {Table} from 'antd';
import { connect } from 'dva';
import React from "react";

const namespace = 'cards';

function mapStateToProps(state) {
  return {
    //组件提取数据
    cardsList: state[namespace].cardsList,
    //组件副作用状态，当用户 dispatch 对应 effect 时，dva 会自动注入对应 effect 的 loading 状态。
    cardsLoading: state.loading.effects['cards/queryList'],
  };
}

@connect(mapStateToProps)
class List extends React.Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'cards/queryList',
    });
  }
  columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '描述',
      dataIndex: 'desc',
    },
    {
      title: '链接',
      dataIndex: 'url',
      render: value => <a href={value}>{value}</a>,
    },
  ];
  render() {
    const { cardsList, cardsLoading } = this.props;

    return (
      <div>
        <Table columns={this.columns} dataSource={cardsList} loading={cardsLoading} rowKey="id" />
      </div>
    );
  }
}

export default List;
